<template>
  <div class="backhome">
    <div class="backhome-left">
      <el-menu class="el-menu-vertical-demo" text-color="#32aefd" default-active="1-1" :default-openeds="['1','2','3','4']" @select="handleSelect">
        <el-submenu index="1">
          <template #title>
            用户管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">用户列表</el-menu-item>
            <el-menu-item index="1-2">安全设置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template #title>
            权限管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">工作区</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template #title>
            店铺管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1">工作区</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template #title>
            订单管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1">工作区</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="5">
          <template #title>
            商品管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1">工作区</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <div class="backhome-right">
      <user-list v-if="currentTab === '1-1'" />
    </div>
  </div>
</template>

<script>
import UserList from './UserManage/UserList'
export default {
  name: '',
  components: {
    UserList
  },
  data () {
    return {
      currentTab: '1-1'
    };
  },
  methods: {
    handleSelect (e) {
      this.currentTab = e;
    },
  },
}
</script>
<style lang='scss' scoped src="./index.scss"/>